<template>
  <div class="home">
    <van-nav-bar :title="navTitle" fixed></van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in swiperList" :key="index">
        <img
          :src="item"
          class="van-image__img"
          style="object-fit: cover; height: 150px"
        />
      </van-swipe-item>
    </van-swipe>

    <div>
      <!-- 用户快捷选项 -->
      <Grid :list="gridList"></Grid>

      <!-- 专项测评项目 -->
      <!-- <div v-if="userIndentify == '学生'">
        <Special
          v-for="item in specialList"
          :key="item.projectId"
          :item="item"
          @click="toEvaluation(item)"
        ></Special>
      </div> -->

      <!-- 测评类型 -->
      <!-- <Title
        :icon="homeIcon"
        :left-title="'心理类型'"
        :router="'Classify'"
        right-title="详情"
      ></Title>
      <Category :category-options="categoryOptions"></Category> -->

      <!-- 测评项目 -->
      <!-- <Title :icon="homeIcon" left-title="您的测评" router="Classify"></Title>
      <div>
        <div
          v-for="item in stateDt.list.slice(0, 3)"
          :key="item.projectId"
          class="van-coupon van-cell prj"
          role="button"
          tabindex="0"
          style="width: auto; margin-top: 10px"
          @click="toEvaluation(item)"
        >
          <div
            class="
              van-cell__value van-cell__value--alone
              van-contact-card__value
              definContent
            "
          >
            <div class="car_title">
              {{ item.projectName }}
            </div>
            <p class="ell_1">
              {{ item.remark }}
            </p>
            <div>
              <div class="lftText">已有***测评</div>
            </div>
            <div class="special-button">
              <button @click="toEvaluation(item)">开始测评</button>
            </div>
          </div>
          <div class="van-image" style="width: 130px">
            <img
              :src="item.classesName"
              class="van-image__img"
              style="object-fit: cover"
            />
          </div>
        </div>
      </div> -->

      <!-- 心理专家 -->
      <!-- <Title
        :icon="homeIcon"
        left-title="咨询师"
        right-title="更多"
        router="expert"
      ></Title>
      <Expert></Expert> -->

      <!-- 科普文章 -->
      <Title
        :icon="homeIcon"
        :left-title="'心理科普'"
        :router="'Article'"
      ></Title>
      <Article></Article>

      <div class="footer">没有更多了</div>
    </div>
    <StageDialog
      v-model:visible="show"
      v-model:active="active"
      @onItemClick="onItemClick"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  computed,
  onBeforeMount,
  watch,
  onMounted,
} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '/@/store'
import { Dialog } from 'vant'
import StageDialog from '/@/components/StageDialog.vue'
import { geMeasureList } from '/@/api/home/home'
import { getUserInfo, toEvaluation } from '/@/util/business-util'
import homeIcon from '/@/assets/icon/home-icon.png'
import { getUser } from '/@/util/auth'
import { swiperList, studentList, teacherList } from './data'
import { useEvaluation } from './home'
import Expert from './component/expert.vue'
import Article from './component/article.vue'
import Category from './component/category.vue'
import Title from './component/title.vue'
import Grid from './component/grid.vue'
import Special from './component/special.vue'

window.toXieYi = function () {
  window.location.hash = '#/xieyi?modelType=4&title=服务协议&to=home'
}
const guestTenantId = '254563' //游客租户

export default defineComponent({
  components: {
    StageDialog,
    Expert,
    Article,
    Category,
    Title,
    Grid,
    Special,
  },
  setup() {
    const { commit, state, dispatch } = useStore()
    const ctr_user = JSON.parse(getUser())
    const router = useRouter()
    const show = ref(false)
    const active = ref('')
    const stateDt = reactive({
      list: [] as any[],
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      check: true,
    })
    let userInfo: any | null = ref(null) // 当前用户信息
    const userIndentify: any = ref('') // 当前用户身份

    onBeforeMount(async () => {
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
      userIndentify.value = userInfo.value.postName
      dispatch('getTenant')
    })

    const onLoad = async () => {
      const tenantId =
        ctr_user && ctr_user.tenantId ? ctr_user.tenantId : guestTenantId
      await geMeasureList(stateDt.currentPage, 100, {
        tenantId: tenantId,
        status: 1,
      }).then((res) => {
        if (stateDt.refreshing) {
          stateDt.list = []
          stateDt.refreshing = false
        }

        const records = res.data.data.records
        if (records && records.length > 0) {
          stateDt.list = [].concat.apply(stateDt.list, res.data.data.records)
          stateDt.currentPage++
        } else {
          stateDt.finished = true
        }
        stateDt.loading = false
      })
    }

    const onRefresh = () => {
      stateDt.finished = false
      stateDt.loading = true
      stateDt.currentPage = 1
      onLoad()
    }
    onLoad()

    onMounted(() => {
      const readFlg = localStorage.getItem('first_log_ctr_prv')
      if (!readFlg) {
        Dialog.confirm({
          title: '温馨提示',
          allowHtml: true,
          message: `欢迎使用鸿康心理！我们非常重视您的个人信息和隐私保护，为了更好地保障您的个人权益，在您使用我们的产品前，请认真阅读<a href="javascript:void(0)" onclick="toXieYi()">《服务协议》</a>和<a href="javascript:void(0)" onclick="toXieYi()">《隐私政策》<a/>的全部内容，同意并接受全部条款后，开始使用我们的产品和服务。我们会严格按照政策内容使用和保护您的个人信息，感谢您的信任。`,
        })
          .then(() => {
            localStorage.setItem('first_log_ctr_prv', 'read')
          })
          .catch(() => {
            router.push({
              name: 'Login',
              params: {},
            })
          })
      }
    })

    const { specialList, categoryOptions } = useEvaluation(ctr_user)

    //用户快捷访问选项
    const gridList = computed(() => {
      if (
        userIndentify.value !== '学生' &&
        userIndentify.value !== '员工' &&
        userIndentify.value !== '家长'
      ) {
        return teacherList
      }

      return studentList
    })

    //顶部显示内容
    const navTitle = ref<string>('')

    watch(
      () => userInfo.value,
      () => {
        if (userInfo.value.postName == '心理老师') {
          navTitle.value = userInfo.value.tenantName + '心理科'
        } else {
          navTitle.value = userInfo.value.tenantName
        }
      }
    )

    return {
      gridList,
      navTitle,
      userInfo,
      userIndentify,
      specialList,
      homeIcon,
      show,
      active,
      stateDt,
      onLoad,
      onRefresh,
      categoryOptions,
      swiperList,
      onItemClick(item: any, index: number) {
        //选择阶段
        show.value = false
        active.value = item.gradeName
      },
      escapeStringHTML(str: string) {
        //把实体格式字符串转义成HTML格式的字符串
        var arrEntities: any = {
          lt: '<',
          gt: '>',
          nbsp: ' ',
          amp: '&',
          quot: '"',
        }
        var htmlstr = str.replace(
          /&(lt|gt|nbsp|amp|quot);/gi,
          function (all, t) {
            return arrEntities[t]
          }
        )
        var ar = htmlstr.split('</p>')
        if (ar.length > 0) {
          var start = ar[0].indexOf('>')
          htmlstr = ar[0].substr(start + 1)
        }
        return htmlstr
      },
      toEvaluation(item: any) {
        toEvaluation(item, router, state, true, true)
      },
    }
  },
})
</script>

<style lang="less" scoped>
.home {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;

  /deep/ .van-grid-item__content {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /deep/ .van-grid {
    margin-bottom: 10px;
  }

  .car_title {
    font-size: 13px;
    font-weight: bold;
  }

  .ell_1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: left;
  }
}

@import './style/card.less';

.van-cell {
  align-items: center;
}

.home-icon {
  margin-right: 5px;
}

.special-button {
  text-align: right;

  button {
    width: 90px;
    height: 23px;
    background-color: rgb(97, 187, 131);
    border-radius: 15px;
    border: none;
    color: white;
    font-size: 12px;
    line-height: 23px;
  }
}

.footer {
  text-align: center;
  font-size: 13px;
  padding: 10px 0;
  color: #646566;
}
</style>
